<!--
  @Description:个人中心分组配置
  @Author:zqy
  @Date:2023-08-24 15:02:38
  @Last Modified by:zqy
  @Last Modified time:2023-08-24 15:02:38
-->
<template>
  <el-dialog
    ref="formDlg"
    title="分组管理"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="500px"
    @close="closeDialog"
  >
    <div><el-button size="mini" @click="handleAdd">新增行</el-button></div>
    <div class="table-list-box">
      <el-table
        style="width: 100%"
        :data="tableData"
        header-row-class-name="table-list-header"
        highlight-current-row
        border
      >
        <el-table-column label="名称">
          <template v-slot="{row}">
            <div v-if="row.edit===true">
              <el-input v-model.trim="row.name" maxlength="15" placeholder="请输入分组名称" />
            </div>
            <div v-else>{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="180">
          <template v-slot="{row}">
            <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleSort(row, 'top')">置顶</el-button>
            <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleSort(row, 'moveUp')">上移</el-button>
            <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleSort(row, 'moveDown')">下移</el-button>
            <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleSort(row, 'bottom')">置底</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template v-slot="{row}">
            <div v-if="row.edit===true">
              <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleCancelEdit(row)">取消</el-button>
              <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleSave(row)">保存</el-button>
            </div>
            <div v-else-if="row.id">
              <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" size="mini" class="btn-green my-txt-btn" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { queryGroupPage, updateGroupSort, saveGroupConfig, delGroupConfig } from '@/api/personCenterConf'
export default {
  name: 'PersonalCenterGroupMgt',
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      sorting: false
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    readonly() {
      return this.tableData.some(v => v.edit === true)
    }
  },
  created() {
    this.refreshTable()
  },

  methods: {
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.tableData = []
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    refreshTable() {
      queryGroupPage().then(res => {
        this.tableData = res.data && res.data.records || []
      })
    },
    /**
     * 排序
     * @param {Object} row 排序行
     * @param {string} type 移动类型：bottom 置底 ，top 置顶 ， moveDown 下移 ，  moveUp 上移
    */
    handleSort(row, type) {
      if (this.sorting) return
      const now = Date.now()
      if (this.sortTime) {
        const diffTime = Math.floor((now - this.sortTime) / 1000)
        // 对比排序操作时间差，大于2s的可操作
        if (diffTime < 2) return
      }
      this.sortTime = now
      const params = {
        id: row.id,
        type
      }
      this.sorting = true
      updateGroupSort(params).then(res => {
        this.sorting = false
        if (res.success === 1) {
          this.refreshTable()
        }
      }).catch(() => {
        this.sorting = false
      })
    },
    handleAdd() {
      this.tableData.push({
        id: `new${new Date().getTime()}`,
        name: '',
        edit: true
      })
    },
    handleEdit(row) {
      this.$set(row, 'edit', true)
      this.$set(row, 'oldName', row.name)
    },
    handleCancelEdit(row, index) {
      if (row.id.indexOf('new') === 0) {
        const index = this.tableData.findIndex(v => v.id === row.id)
        if (index > -1) {
          this.tableData.splice(index, 1)
        }
      } else {
        this.$set(row, 'edit', false)
        this.$set(row, 'name', row.oldName)
      }
    },
    handleSave(row) {
      const name = `${row.name}`.trim()
      if (name.length === 0) {
        this.$message.wraning('分组名称不能为空')
        return
      }
      const data = { name }
      if (row.id.indexOf('new') === -1) {
        data.id = row.id
      }
      saveGroupConfig(data).then(res => {
        if (res.success === 1) {
          this.refreshTable()
        }
      })
    },
    // 删除处理
    handleDelete(row) {
      const { id, name } = row
      this.$confirm(`此操作将永久删除分组：${name}, 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroupConfig(id).then(res => {
          if (res.success === 1) {
            this.refreshTable()
          }
        })
      }).catch(() => {})
    }

  }
}
</script>
<style lang='scss' scoped>
  .my-txt-btn{
    padding: 0 !important;
  }
</style>
